@import "../util/myKeyframes";
@import "../util/myUtil";
@import "compass/css3";

.app.hello2 {
  .div1 {
    $length: 100px;
    border-style: solid;
    width: $length;
    height: $length;
    padding: $length/4 0;
    .bt {
      $btwidth: $length/2;
      @include biankuang;
      width: $btwidth;
      height: $btwidth;
      line-height: $btwidth;
    }
    &:hover {
      cursor: pointer;
      padding: ($length - $length/1.5) / 2 0;
      .bt {
        @include transition(5s);
        background-color: #000b15;
        width: $length/1.5;
        height: $length/1.5;
        line-height: $length/1.5;
      }
    }

  }
  .zhongjian {
    width: 400px;
    height: 50px;
    line-height: 50px;
    background: {
      color: #00b3ee;
    }
  }
  .zhongjian:hover {
    width: 600px;
    height: 200px;
    @include transition(1s height cubic-bezier(.09, 1.45, .74, -0.49), 2s width ease-in cubic-bezier(.09, 1.45, .74, -0.49));
    @include animation(1s hehe)
  }
  .z2 {
    width: 400px;
    height: 50px;
    line-height: 50px;
    background: {
      color: #b9def0;
    }
  }

  .z2:hover {
    @include animation(1s hehe)
  }

}








